
import React, { useState, useEffect } from 'react';
import { Card, Row, Col } from 'antd';
import { DeleteColumnOutlined, EllipsisOutlined, PayCircleOutlined, AccountBookOutlined } from '@ant-design/icons'
import First from './components/first';
import Second from './components/second';
import { getFetch } from '@/utils/doFetch';
import { useRequest } from 'umi';
import pickcolor from "@/utils/pickcolor";
//67b8de  91c9e8  b4dced e8f8ff

let col = { xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 4 };


let Business = () => {
    const [state, setstate] = useState({
        visible: false,
        type: 1,
        curitem: {}
    }),
        [bussiness, setbussiness] = useState(0),
        [data, setdata] = useState([]);


    useEffect(() => {
        if (state.visible === false) {
            getFetch({ url: "/wbn-api/other_business_take", params: { is_all: 1 } }).then(res => {
                setdata(res.data)
            })
            getFetch({ url: "/wbn-api/company/to_dealt", params: {} }).then(res => {
                setbussiness(res.data)
            })
        }
    }, [state.visible]);





    return <div style={{ width: "100%", position: "relative", overflow: "hidden",height:"100%" }}>
        <div style={{ padding: 12, position: "absolute", width: "100%", height: "100%", transform: state.visible ? "translateX(-100vw)" : "translateX(0vw)", transition: "all 0.4s", overflow: "auto" }}>
            <Row
                gutter={18}>
                <Col {...col}>
                    <div className="diycard" onClick={() => {
                        setstate({
                            visible: true,
                            type: 1,
                            hide: true,
                            curitem: {}
                        })
                    }}>
                        <DeleteColumnOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 20 }} />
                        <span>待办 <b style={{ color: "#fff", textShadow: "0 0 2px #000", fontSize: 20 }}>{bussiness}</b></span>
                        <span>代账业务</span>
                    </div>
                </Col>
                {
                    (data?.dataList && data?.dataList.length > 0) ? data?.dataList.map((it, i) => {
                        let colorarr = ["3399cc", "67b8de", "2be0a4", "a6c1ee"]
                        return <Col {...col} key={i}>
                            <div className="diycard" style={{ backgroundColor: i > 3 ? pickcolor() : "#" + colorarr[i] }} onClick={() => {
                                setstate({
                                    visible: true,
                                    hides: true,
                                    type: 2,
                                    curitem: it
                                })
                            }}>
                                <EllipsisOutlined style={{ color: "#fff", fontSize: 28, marginBottom: 10 }} />
                                <span>待办 <b style={{ color: "#fff", textShadow: "0 0 2px #000", fontSize: 20 }}>{it.num}</b></span>
                                <span>{it.name} </span>
                            </div>
                        </Col>
                    }) : <Col {...col} />
                }
            </Row>
        </div>
        <div
            style={{ position: "absolute", width: "100%", height: "100%", zIndex: 10, transform: state.visible ? "translateX(0vw)" : "translateX(100vw)", transition: "all 0.4s", overflow: "auto" }}>
            {
                (state.visible && state.type == 1 || state.hide) && <First close={() => {
                    setstate({
                        visible: false,
                        type: 1,
                        hide: true
                    })
                    setTimeout(() => {
                        setstate({
                            visible: false,
                            type: 1,
                            hide: false
                        })
                    }, 500);
                }} />
            }

            {
                (state.visible && state.type == 2 || state.hides) && <Second row={state.curitem} close={() => {
                    setstate({
                        visible: false,
                        type: 2,
                        hides: true
                    })
                    setTimeout(() => {
                        setstate({
                            visible: false,
                            type: 2,
                            hides: false
                        })
                    }, 500);
                }} />
            }
        </div>



    </div>


}



export default Business